<template>
  <el-container> </el-container>
</template>

<script>
import { computed, reactive, ref } from 'vue'
import { postTest } from '@/api/resource'

class Format {
  constructor(tag, name, value) {
    this.tag = tag
    this.name = name
    this.value = value
  }
}
class Category {
  constructor(name, child) {
    this.name = name
    this.child = child
  }
}
class Header {
  constructor(k, v) {
    this.k = k
    this.v = v
  }
}

export default {
  name: 'manager',
  setup() {
    const parseTagNum = ref(2)
    const filter = ref(false)
    const modelRadio = { xPath: 'xPath', json: 'json' } // json: 'json', document: '文档', javaBean: 'java全类名'
    const form = reactive({
      siteName: '',
      rdsName: '',
      url: '',
      userAgent: [],
      category: {},
      parseType: '',
      json: {
        key: undefined
      },
      xPath: {
        key: undefined
      },
      parseContent: [new Format('title', '标题', 'contentTitle'), new Format('address', '链接地址', 'shareUrl')],
      serializeFilterRuler: {
        hasKey: undefined,
        notKey: undefined,
        excludeMap: {}
      }
    })

    const onSubmit = () => {
      postTest(form)
        .then((result) => {
          console.log('onSubmit', result)
        })
        .catch((err) => {})
      console.log('submit!', form)
    }

    const change = (orgin, val, arr) => {
      if (val < 2) return
      if (orgin > val) {
        arr.pop()
      } else {
        arr.push(new Format())
      }
      parseTagNum.value = val
    }

    form.arrayKey = computed({
      get() {
        return form[form.parseType].key
      },
      set(val) {
        form[form.parseType].key = val
        //TODO 其他key置空
      }
    })

    return { form, modelRadio, parseTagNum, filter, change, onSubmit }
  }
}
</script>

<style></style>
